<script setup>
import {onBeforeMount, reactive, toRefs, ref, onMounted} from "vue"
import {addUserHandler,updateUserHandler} from "../../api/user.js";
import {ElMessage} from "element-plus";

const  data = reactive({
  userForm:{
    name: "",
    password:"",
    mail:"",
    phone:""
  }
})
const props=defineProps({
  method: {
    type: String,
    default: "Create"
  },
  userForm: {
    type: Object
  }
})

onMounted(()=>{
  // 把对象转成一个字符串
  const  jsonString = JSON.stringify(props.userForm)
  // 在把字符串转换成json,最后赋值data.userForm
  data.userForm = JSON.parse(jsonString)
})

const emits=defineEmits(["rollback"])
const  {userForm} = toRefs(data)
const userFormRef = ref()
let loading = ref(false)

// 实现清空表单的逻辑
const clear =()=>{
  userFormRef.value.resetFields()
}

// 表单校验功能
const rules = reactive({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  mail: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
  ],
})

// 添加用户的逻辑
const submit =()=>{

  // 触发执行数据校验
  userFormRef.value.validate((valid) => {
    if(valid) {
        loading.value=true
        console.log("查看加载",loading.value)
      if (props.method === "Create"){
        addUserHandler(data.userForm).then((response)=>{
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          loading.value=false
          //emits("rollback")

        })
      }else {
        updateUserHandler(data.userForm).then((response)=>{
          ElMessage({
            type: 'success',
            message: '更新成功',
          })
          loading.value=false
          emits("rollback")

        })
      }

    }else{
        ElMessage({
          type: 'warning',
          message: '请完善表单内容',
        })
    }
  })
}

</script>

<template>
  <el-form ref="userFormRef"  :rules="rules"  :model="userForm" >
    <el-form-item  class="form-item"  prop="name" label="姓名" label-width= "64px" >
      <el-input v-model="userForm.name" autocomplete="off" />
    </el-form-item>
    <el-form-item class="form-item" prop="password" label="密码" label-width= "64px" >
      <el-input v-model="userForm.password" autocomplete="off" />
    </el-form-item>
    <el-form-item class="form-item" prop="mail"  label="邮箱" label-width= "64px" >
      <el-input v-model="userForm.mail" autocomplete="off" />
    </el-form-item>
    <el-form-item class="form-item"  prop="phone" label="手机号" label-width= "64px" >
      <el-input v-model="userForm.phone" autocomplete="off" />
    </el-form-item>
    <div class="dialog-footer">
      <el-button @click="clear()">清空</el-button>
      <el-button type="primary" @click="submit()" >
        {{ props.method === "Create"?"添加":"更新" }}
      </el-button>
    </div>
  </el-form>
</template>

<style scoped>
.form-item{
  width: 350px;
  margin: 20px auto;
}
.dialog-footer{
  display: block;
  margin-top: 20px;
}
</style>